import axios from "axios"

// 要进行封装axios或其他第三方网络请求框架的的原因是：
// 可能第三方框架在某一天不再维护，需要更换其他框架时，不用在每个导入的js文件或vue组件中修改原来使用axios的代码
// 而是只需要修改该封装的request.js文件就可以了

export function request(config, success, failure) {
    // 1.创建axios实例
    const axios1 = axios.create({
        baseURL: 'http://httpbin.org',
        timeout: 3000
    })
    // 发送真正的网络请求
    axios1(config).then(res => {
        console.log('111');
        success(res) // 回调函数，用于外部调用该封装的网络请求模块时，可以通过该回调获取相应的数据
    }).catch(err => {
        console.log('000');
        failure(err)
    })
}

export function request1(config) {
    // 1.创建axios实例
    const axios1 = axios.create({
        baseURL: 'http://httpbin.org',
        timeout: 3000
    })
    // 发送真正的网络请求
    axios1(config.baseConfig).then(res => {
        console.log('111');
        config.success(res) // 回调函数，用于外部调用该封装的网络请求模块时，可以通过该回调获取相应的数据
    }).catch(err => {
        console.log('000');
        config.failure(err)
    })
}

export function request2(config) {
    return new Promise((resolve, reject) => {
        // 1.创建axios实例
        const axios1 = axios.create({
            baseURL: 'http://httpbin.org',
            timeout: 3000
        })

        // 2.axios的拦截器
        // 2.1请求拦截
        axios1.interceptors.request.use(
            config => {
                // 为什么要做请求拦截？
                // 可能：1.config中的一些信息不符合服务器的要求
                // 2.每次发送网络请求时，都希望在界面中显示一个请求的图标
                // 3.某些网络请求，比如登录，必须携带一些特殊的信息，例如token
                console.log(config);
                return config; // 拦截后需要将config返回
            }, err => {
                console.log(err);
            })
        // 2.2响应拦截
        axios1.interceptors.response.use(
            res => {
                // 为什么要做请求拦截？
                // 可能：1.config中的一些信息不符合服务器的要求
                // 2.每次发送网络请求时，都希望在界面中显示一个请求的图标
                // 3.某些网络请求，比如登录，必须携带一些特殊的信息，例如token
                console.log(res);
                //return res; 
                return res.data; // 拦截后需要将res返回
            }, err => {
                console.log(err);
            })

        // 发送真正的网络请求
        axios1(config).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

export function request3(config) {
    return new Promise((resolve, reject) => {
        // 1.创建axios实例
        const axios1 = axios.create({
            baseURL: 'http://httpbin.org',
            timeout: 3000
        })
        // 发送真正的网络请求
        return axios1(config) // 视频中说：由于axios的实例，本身就是一个Promise，所以直接返回实例就可以了。但实际测试发现这种方式不行，可能由于axios版本问题，已经不是返回Promise了
    })
}